<template>
  <div id="mine">

      <!-- 头部 -->
     <router-link to="/">
       <van-nav-bar title="快速预约" left-arrow fixed class="van-nav-bar"/>
    </router-link>
    <!-- <h3>这是subscribe(预约)界面</h3> -->
    <!-- 预约时间 -->
    <div class="time">

      <van-field
        readonly
        clickable
        name="calendar"
        :value="value"
        label="预约时间"
        placeholder="点击选择日期"
        @click="showCalendar = true"
        @blur.native.capture="checkTime"
      />
      <van-calendar color="#87CEFA" v-model="showCalendar" @confirm="onConfirm" />

      <!-- 预约地址 -->
      <van-field
        readonly
        clickable
        name="area"
        :value="val"
        label="预约地址"
        placeholder="点击选择省市区"
        @click="showArea = true"
        @blur.native.capture="checkPlace"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onFirm"
          @cancel="showArea = false"
        /> </van-popup
      ><br />

      <!-- 确定预约 -->
      <van-button class="btn" type="primary" size="large" @click="register">确定预约</van-button>
    </div>

    <!-- 底部选项卡 -->
    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
// 这个是省市区数据
import { areaList } from "@vant/area-data";
// 这个是气泡
import { Toast } from 'vant';

export default {
  data() {
    return {
      uid:"",
      selected: "",
      value: "",
      showCalendar: false,
      val: "",
      showArea: false,
      areaList: areaList, // 数据格式见 Area 组件文档
    };
  },
  watch: {
    // 这是底部选项卡
    // selected(newVal) {
    //   if (newVal == "page") {
    //     this.$router.push("/");
    //   } else if (newVal == "service") {
    //     this.$router.push("/service");
    //   } else if (newVal == "consult") {
    //     this.$router.push("/consult");
    //   } else if (newVal == "me") {
    //     this.$router.push("/mypage");
    //   }
    // },
  },
  methods: {
    // 时间事件
    onConfirm(date) {
      this.value = `${date.getMonth() + 1}月${date.getDate()}日`;
      this.showCalendar = false;
    },
    // 地址事件
    onFirm(values) {
      this.val = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
    },
    // 判定预约时间
    checkTime(){
      if(this.value){
        return true
      }
    },
    // 判定预约地址
    checkPlace(){
      if(this.val){
        return true
      }
    },
    // 判定确定注册
    register(){
      var uid = this.$store.state.uid;
      if(this.checkPlace() && this.checkTime()){ //判定有填写内容才能注册
      this.axios.post('/register',`time=${this.value}&address=${this.val}社区卫生服务中心&register_uid=${uid}`)
      .then(function(res){
        Toast('预约成功');
        this.$router.push('/');
        // console.log(`用户${uid}您在${this.value}时间内在${this.val}社区卫生服务中心预约成功`);
      })
      .catch(function(res){
        console.log(res)
      })
      }
    }
  }
};
</script>

<style scoped>
/* 通过外层id标识，穿透设置css */
#mine /deep/ .van-nav-bar__title{
  color: white !important;
  position: relative;
}
.van-nav-bar {
  background-color: #9bb8dc;
}
.time{
  margin-top: 2rem;
  position: absolute;
  top: 0;
  left: 0;
}
.btn{
  border-radius: 5px;
  width: 80%;
  display: block;
  margin: 0 auto;
  height: 40px;
  margin-top: 11px;
  margin-left: 3rem;
  background-color: #1989fa;
  border: .0625rem solid #1989fa;
}
</style>
